<template>
  <el-form class="form" :rules="rules" :model="formData" label-width="120px">
    <el-form-item :label="$t('sys_api_equId') + ':'" prop="device_id">
      <el-input v-model="formData.device_id"></el-input>
    </el-form-item>
    <el-form-item :label="'Http_Url' + ':'" prop="url">
      <el-input v-model="formData.url"></el-input>
    </el-form-item>
    <el-form-item :label="'Http_Key' + ':'" prop="key">
      <el-input v-model="formData.key"></el-input>
    </el-form-item>
    <el-form-item :label="$t('dataPush.push_snap_img') + ':'">
      <el-select v-model="formData.push_snap_img">
        <el-option
          v-for="item in switchList"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
    </el-form-item>
    <el-form-item :label="$t('dataPush.push_frame_img') + ':'">
      <el-select v-model="formData.push_frame_img">
        <el-option
          v-for="item in switchList"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
    </el-form-item>
    <el-form-item :label="$t('dataPush.push_compared_img') + ':'">
      <el-select v-model="formData.push_compared_img">
        <el-option
          v-for="item in switchList"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
    </el-form-item>
    <el-form-item>
      <MyButton class="confirm" @click="handleReset" icon="el-icon-refresh">{{
        $t("dataPush.reset")
      }}</MyButton>
      <MyButton class="confirm" @click="handleConfirm" icon="el-icon-refresh">{{
        $t("common.confirm")
      }}</MyButton>
    </el-form-item>
  </el-form>
</template>

<script>
import {
  setDevice,
  setUrl,
  setPicSwitch,
  getDevice,
  getUrl,
  getPicSwitch,
} from "./service";
import util from "@/utils";
export default {
  data() {
    return {
      formData: {},
      switchList: [
        { label: this.$t("common.yes"), value: 1 },
        { label: this.$t("common.no"), value: 0 },
      ],
      rules: {
        device_id: [
          {
            required: true,
            message: this.$t("inputDeviceId"),
            trigger: "change",
          },
        ],
        url: [
          {
            required: true,
            message: this.$t("inputViperUrlErr"),
            trigger: "change",
          },
        ],
        key: [
          {
            required: true,
            message: this.$t("inputViperKeyErr"),
            trigger: "change",
          },
        ],
      },
    };
  },
  mounted() {
    this.handleReset();
  },
  methods: {
    handleReset() {
      this.getDevice();
      this.getUrl();
      this.getPicSwitch();
    },
    async handleConfirm() {
      const [res1, res2, res3] = await Promise.all([
        this.setDevice(),
        this.setUrl(),
        this.setPicSwitch(),
      ]);
      if (res1.code == 0 && res2.code == 0 && res3.code == 0) {
        util.msg.success("edit_success");
      }
    },
    async getDevice() {
      const res = await getDevice();
      if (res.code == 0) {
        this.$set(this.formData, "device_id", res.data.device_id);
      }
    },
    async getUrl() {
      const res = await getUrl();
      if (res.code == 0) {
        this.$set(this.formData, "url", res.data.url);
        this.$set(this.formData, "key", res.data.key);
      }
    },
    async getPicSwitch() {
      const res = await getPicSwitch();
      if (res.code == 0) {
        this.$set(this.formData, "push_snap_img", res.data.push_snap_img);
        this.$set(this.formData, "push_frame_img", res.data.push_frame_img);
        this.$set(
          this.formData,
          "push_compared_img",
          res.data.push_compared_img
        );
      }
    },
    setDevice() {
      const params = {
        device_id: this.formData.device_id,
      };
      return setDevice(params);
    },
    setUrl() {
      const params = {
        key: this.formData.key,
        url: this.formData.url,
      };
      return setUrl(params);
    },
    setPicSwitch() {
      const params = {
        ...this.formData,
        deviceId: this.formData.device_id,
        httpUrl: this.formData.url,
        httpKey: this.formData.key,
        push_msg_recver: 0,
      };
      return setPicSwitch(params);
    },
  },
};
</script>

<style lang="less" scoped>
.form {
  /deep/ .el-input {
    width: auto;
  }
}
</style>
